{include file="public/header296" /}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-list" data-type="category">分类管理</button>
        <button class="layui-btn layuiadmin-btn-list" data-type="insert">添加</button>
      </div>
      <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
      <script type="text/html" id="table-content-list">
        <a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>
<script>
  layui.use(['layer','table'], function(){
    var $ = layui.$
          , table = layui.table;

    table.render({
      elem: '#LAY-app-content-list'
      ,url: "{:url('banner/getBannerList')}"
      , request: {
        pageName: 'page',
        limitName: 'page_size'
      }
      , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
        ,first: '首页'
        ,last: '尾页'
        ,limit: 10
      }
      ,cols: [[
        {field: 'id', width: 80, title: 'ID', align:'center'}
        ,{field: 'category_name', title:'分类', align:'center'}
        ,{field: 'name', title:'标题',align:'center'}
        ,{field: 'image_url', title: "图片", width: 160, align:'center', templet: function (d) {
          if (d.avatar != '') {
            str = '<div id="layer-photos-cover-'+ d.id +'" class="layer-photos-demo">';
            str +='<img layer-src="'+ d.image_url +'" style="width:100px;height: 40px" src="' + d.image_url + '">';
            return str;
          } else{
            return '';
          }
        }}
        ,{field: 'status', title: "状态", align:'center', templet: function (d) {
          var is_checked = '';
          if (d.status == 1) {
              is_checked = 'checked';
          }
          return '<input type="checkbox" name="status" switch_page_id="'+ d.id +'" value="'+ d.status +'" lay-skin="switch" lay-text="显示|隐藏" lay-filter="status" '+ is_checked +'>';
        }}
        ,{field: 'update_time', title: '最后修改', align:'center'}
        ,{title: '操作', minWidth: 150, align: 'center', fixed: 'right', toolbar: '#table-content-list'}
      ]]
      ,text: {
        none: '暂无相关数据'
      }
      , done: function () {
        hoverOpenImage();
      },
    });
    // 监听工具条
    table.on('tool(LAY-app-content-list)', function(obj){
      var data = obj.data;
      var id = data.id;
      if(obj.event === 'edit'){
        layer.open({
          type: 2
          ,title: '编辑Banner'
          ,content: "{:url('banner/edit')}?id=" + id
          , maxmin: true
          , area: ['800px', '85%']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#Lay-app-form-edit");

            iframeWindow.layui.form.on('submit(Lay-app-form-edit)', function(data){
              var field = data.field;
              $.ajax({
                url:"{:url('banner/edit')}",
                type:'post',
                data:{'field':field},
                success:function(res){
                  if(res.code == 0){
                    layer.msg(res.msg,{icon:1});
                    table.reload('LAY-app-content-list');
                    layer.close(index);
                  }
                  else{
                    return layer.msg(res.msg,{icon:5});
                  }
                }
              });
            });
            submit.trigger('click');
          }
        });
      } else if(obj.event === 'delete'){
        layer.confirm('确定删除该该条记录吗，请谨慎操作？', {title : '温馨提示'}, function(index){
          $.ajax({
            url:"{:url('banner/delete')}",
            type:'post',
            data:{'id':id},
            success: function(res){
              if(res.code == 0){
                obj.del();
                layer.msg(res.msg,{icon:1});
              } else {
                layer.msg(res.msg,{icon:5});
              }
            }
          });
        });
      }
    });

    function hoverOpenImage(){
      var img_show = null;
      $('td img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:750px;' />";
        img_show = layer.tips(img, this,{
          tips:[1, '#000']
          , area: ['770px', '340px']
          , maxWidth: 750
        });
      },function(){
        layer.close(img_show);
      });
    }

    var $ = layui.$, active = {
      insert: function(){
        layer.open({
          type: 2
          ,title: '添加Banner'
          ,content: "{:url('banner/insert')}"
          ,maxmin: true
          ,area: ['800px', '85%']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#Lay-app-form-submit");
            iframeWindow.layui.form.on('submit(Lay-app-form-submit)', function(data){
              var field = data.field;

              if(field.category_id == ''){ layer.msg('请选择分类',{icon:5}); return false }
              if(field.image_url == ''){ layer.msg('图片地址不能为空',{icon:5}); return false }
              $.ajax({
                url: "{:url('banner/insert')}",
                type: 'post',
                data: {'field':field},
                success:function(res){
                  if(res.code == 0){
                    layer.msg(res.msg,{icon:1});
                    layer.close(index);
                    table.reload('LAY-app-content-list');
                  } else{
                    layer.msg(res.msg,{icon:5});
                    return false;
                  }
                }
              });
            });
            submit.trigger('click');
          }
        });
      },
      category: function(){
        window.location.href = "{:url('bannerCategory/index')}";
      }
    };

    // 监听 data-type 事件
    $('.layui-btn.layuiadmin-btn-list').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
{include file="public/footer" /}